<template>
  <div>
    <el-dialog
      title="绑定采购商品"
      :close-on-click-modal="false"
      :visible.sync="visible"
      width="80%">
      <el-form :model="dataForm" ref="dataForm"  @keyup.enter.native="dataFormSubmit()"
               v-loading="dataListLoading"
               label-width="100px">
        <el-row :gutter="20">
          <!-- <el-col :span="7">
            <el-form-item label="一级分类" prop="">
              <el-select v-model="selectParentClass" filterable placeholder="请选择" value="selectParentClass" @change="selectSubClass=''">
                <el-option :value="-1" :key="-1" label="请选择"></el-option>
                <el-option
                  v-for="(item,index) in classList"
                  :key="index"
                  :label="item.className"
                  :value="index">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="二级分类" prop="" v-if="selectParentClass !== -1">
              <el-select v-model="selectSubClass" filterable placeholder="请选择" value="selectSubClass" >
                <el-option
                  v-for="item in (classList[selectParentClass].subGoodsClassList)"
                  :key="item.id"
                  :label="item.className"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="5">
            <el-form-item label="商品名称" prop="">
              <el-input v-model="dataForm.key" placeholder="商品名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-button @click="dataForm.key = ''
              getGoodsList()">重置</el-button>
            <el-button @click="pageIndex = 1
              getGoodsList()" plain type="primary">查询</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5" v-for="(item,index) in goodsList" style="padding-bottom: 20px;margin-left:30px" :key="index">
            <el-badge :value="item.priceType === 1?'兑换商城':'福利商城'" :type="item.priceType === 1?'warning':'primary'">
              <el-card :body-style="{ padding: '0px' }" class="el-card is-hover-shadow" style="width:300px; height: 180px">
                <img :src="item.img" class="image" style="width:150; height:150">
                <div style="padding: 14px;">
                  <span class="characters">{{item.name}}</span>
                  <div class="bottom clearfix">
                    <el-button type="text" :val="item.id"  v-if="optGoodsArray.indexOf(item.id) === -1" class="button" @click="optGoodsHandle(true,item.id,index)">选择</el-button>
                    <el-button style="color: #c8c9cc" type="text"  v-if="optGoodsArray.indexOf(item.id) !== -1"  class="button" @click="optGoodsHandle(false,item.id)">已选择</el-button>
                  </div>
                </div>
              </el-card>
            </el-badge>
          </el-col>
        </el-row>
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[16]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>

    
  </div>
</template>

<script>
  export default {
    data () {
      return {
        checkFlag: false,
        visible: false,
        activityNameList: [],
        dataForm: {
          key: '',
          classId: 0
        },
        // props: {
        //   value: 'id',
        //   label: 'className',
        //   children: 'subGoodsClassList'
        // },
        // purchaseClassList: [],
        classList: [],
        goodsList: {},
        pageIndex: 1,
        pageSize: 16,
        totalPage: 0,
        optGoods: {},
        optGoodsArray: [],
        dataListLoading: false,
        dialogVisible: false,
        skuId: 0,
        selectGoodsId: -1,
        skuInfo: [],
        selectSku: {}
      }
    },
    components: {
    },
    methods: {
      // 添加选中规格信息
      addBatchData () {
        // if (null != this.updateBatchForm.purchaseClassId) {
        //   if (this.updateBatchForm.purchaseClassId.length !== 2) {
        //     this.$message.error('请重新选择分类！')
        //     return
        //   }
        // } else {
        //   this.$message.error('请选择分类！')
        //   return
        // }
        this.optGoodsArray.push(this.selectGoodsId)
        this.dialogVisible = false
      },
      init (id) {
        // this.$http({
        //   url: this.$http.adornUrl(`/activity/goods/queryPurchaseClassList`),
        //   method: 'get',
        //   params: this.$http.adornParams()
        // }).then(({data}) => {
        //   if (data && data.code === 0) {
        //     debugger
        //     this.purchaseClassList = data.data
        //   }
        // })
        debugger
        this.optGoods = {}
        this.optGoodsArray = []
        this.dataForm.key = ''
        this.dataForm.classId = id
        // 请求商品列表
        this.getGoodsList()
        this.visible = true
      },
      getGoodsList () {
        debugger
        this.dataListLoading = true
        // 请求商品列表
        this.$http({
          url: this.$http.adornUrl(`/activity/goods/queryLevelClassGoodsList`),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex - 1,
            'limit': this.pageSize,
            'keywords': this.dataForm.key,
            'classId': this.dataForm.classId
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.goodsList = data.data.list
            this.totalPage = data.data.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.visible = false
        if (this.optGoodsArray.length <= 0) {
          this.$message.error('未选择要添加的商品！')
          return
        }
        this.$http({
          url: this.$http.adornUrl(`/activity/goods/addPurchaseGoods/${this.dataForm.classId}`),
          method: 'post',
          data: this.$http.adornData(this.optGoodsArray, false)
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
                this.$emit('refreshDataList')
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.init(null)
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        // this.init(null)
        this.getGoodsList()
      },
      // 选择商品
      optGoodsHandle: function (flag, id, index) {
        debugger
        if (flag) { // 添加
          this.selectGoodsId = id
          this.dialogVisible = true
          this.optGoodsArray.push(this.selectGoodsId)
        } else { // 删除
          // this.optGoods.splice(Object.keys(this.optGoods).indexOf(id.toString()), 1)
          delete this.optGoods[id]
          this.optGoodsArray.splice(this.optGoodsArray.indexOf(id), 1)
        }
      }
    }
  }
</script>
<style>
  .characters{
    /* max-width: 130px; */
    /* display:inline-block; */
    display: -webkit-box;
    /* width:150px; */
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
    height: 100px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .sku img{
    max-width: 80px;
  }

  .sku {
    display: -webkit-box;
  }
  .sku s{
    font-size: 10px;
    color: #b5b2b2;
    padding-left: 15px;
  }

  .sku .sub-title{
    color: #b5b2b2;
    font-size: 10px;
  }
  .specs{
    padding-top: 20px;
  }
  .sku .price{
    padding-left: 10px;
  }
  .el-badge__content{
    margin-right: 60px;
  }
  .el-badge__content.is-fixed {
    right: 0px !important;
  }
</style>
